<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 190px;
        }
    </style>
</head>
<body>
    <div style="display: flex; justify-content: space-around">
        <fieldset>
            <legend>注册</legend>
            <table>
                <tr>
                    <td>
                        名字 :
                    </td>
                    <td>
                        <input id="regist-name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码 :
                    </td>
                    <td>
                        <input id="regist-pwd" type="password">
                    </td>
                </tr>
                <tr>
                    <td colspan="2"> <!--占两行-->
                        <button id="regist-btn">注册</button>
                    </td>

                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>登录</legend>
            <table>
                <tr>
                    <td>
                        名字 :
                    </td>
                    <td>
                        <input id="login-name" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        密码 :
                    </td>
                    <td>
                        <input id="login-pwd" type="password">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button id="login-btn">登录</button>
                    </td>

                </tr>
            </table>
        </fieldset>
    </div>
</body>
<script src="jquery-2.2.3.min.js"></script>
<script>

    $(function () {
        $("#regist-btn").on("click", function () {
            regist()
        })

        $("#login-btn").on("click", function () {
            login()
        })
        var future= {}

        future.burl = "http://localhost:3000/"

        future.ajax= function (option) {
            $.ajax({
                url: future.burl + option.url,
                type: option.type || "post",
                data: option.data,
                async: option.async || false,
                success: function (result) {
                    if (option.success) {
                        option.success(result)
                    }
                },
                error: function (error) {
                    if (option.error) {
                        option.error(error)
                    } else {
                        alert(error.responseText)
                    }
                }
            })
        }
            function regist(){
                future.ajax({
                    url:"users/regist",
                    type: "post",
                    data: {
                        name:$('#regist-name').val(),
                        pwd :$('#regist-pwd').val(),
                    },
                    success:function (result) {
                        alert(result)
                    }
                })
            }
            function login(){
                future.ajax({
                    url:"users/login",
                    type:"get",
                    data: {
                        name:$('#login-name').val(),
                        pwd :$('#login-pwd').val(),
                    },
                    success:function (result) {
                        alert(result)
                    }

                })
            }

    })




</script>
</html>


